
import React, {Fragment} from "react";
import styles from "../generator/Index.module.css";
import {Icon, Menu, message, Tabs, Modal, Badge, Empty} from "antd";
import Store from "./Store";
import MenuForm from "../generator/MenuForm";
import {observer} from "mobx-react";
import ModelConfig from "./ModelConfig";
import PageConfig from "./PageConfig";
import {deleteMenu} from "../../../api/work/GenerateApi";
import SimpleConfig from "./SimpleConfig";
import NumberConfig from "./NumberConfig";
import ResultModal from "./ResultModal";
import UpdateMenuForm from "./UpdateMenuForm";

@observer
class Index extends React.Component{

    constructor(props) {
        super(props);
        this.state={}
    }

    // 类型菜单点击时
    handleGroupClick = (subType) => {
        Store.modelInfo={};
        Store.setSubType(subType);
        Store.controller = null;
    };

    // 模块菜单点击时
    handleModuleClick = ( key, domEvent) => {
        Store.setModule(key.key)
    };

    // 选择的控制器
    handleOnSelect = (selectedKeys) => {
        Store.controller = selectedKeys.key;
        //获取模型信息
        Store.fetchModelInfo();
        //将tab设置为模型
        Store.activeKey = "model";
        Store.stepCurrent = 0;
    };

    deleteMenu = (item) => {
        const { confirm } = Modal;
        confirm({
            title: item["pid"] === "0" ? `你确定要删除模块<${item["label"]}>吗?` : `你确定要删除控制器<${item["label"]}>吗?`,
            content: item["pid"] === "0" ? '确定删除后不可逆，模块删除后模块下包含的所有控制器配置和生成得代码也会一并删除' : '确定删除后不可逆，将会 删除控制器配置和生成得代码',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                //删除菜单以及生成的代码
                console.log("菜单id:",item["id"])
                deleteMenu({id:item["id"]}).then(response => {
                    if (response.data.code === 200){
                        message.success(response.data.msg);
                        Store.flashMenu();
                    }
                });

            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };

    updateMenu = (info) => {
        Store.updateMenuVisible = true;
        Store.menuInfo = {
            id:info.id,
            pid:info.pid,
            title:info.label,
            icon:info.icon ? info.icon : "",
            sort:info.sort ? info.sort : 1,
        };
    };

    //生成菜单
    makeMenu = () => {
        const { SubMenu } = Menu;
        return (
            Store.menuList.map(item => {
                return <SubMenu
                    key={item["key"]}
                    onTitleClick={this.handleModuleClick}
                    title={
                        <span>
                            <Icon type="plus-square" theme="twoTone" onClick={(e) => {Store.menuVisible = true;Store.pid=item["id"];e.stopPropagation();}}/>
                             <Icon type="edit" theme="twoTone" onClick={(e) => {this.updateMenu(item);e.stopPropagation();}}/>
                            <Icon type="delete" theme="twoTone" onClick={(e) => {this.deleteMenu(item);e.stopPropagation();}}/>
                            <span>{item["label"]}</span>
                            <Badge count={item["children"] ? item["children"].length : 0} style={{ backgroundColor: '#52c41a',marginLeft: '2px' }} />
                        </span>
                    }
                >
                    {item["children"] && item["children"].map(val => {
                        return (
                            <Menu.Item key={val["key"]}>
                                <Icon type="edit" theme="twoTone" onClick={(e) => {this.updateMenu(val);e.stopPropagation();}} />
                                <Icon type="delete" theme="twoTone" onClick={(e) => {this.deleteMenu(val);e.stopPropagation();}} />
                                {val["label"]}
                            </Menu.Item>
                        )
                    })}
                </SubMenu>
            })
        )
    };

    handleTabChange = async (key)  => {
        Store.activeKey = key;
        if (key === "page"){
            if (!Store.modelInfo.modelClass){
                Store.activeKey = "model";
                message.warning("请先配置模型");
            }else {
                //初始化页面配置信息
                Store.fetchPageInfo();
            }
        }
    };

    render() {
        const { SubMenu } = Menu;
        const { TabPane } = Tabs;
        return (
            <Fragment>
                <div className={styles.container}>
                    <div className={styles.left}>
                        <Menu
                            mode={"inline"}
                            style={{border: 'none',width: "300px"}}
                            openKeys={Store.openKeys}
                            onSelect={this.handleOnSelect}
                        >
                            {/*常规页面生成*/}
                            <SubMenu
                                key="ordinary"
                                onTitleClick={() => {this.handleGroupClick(Store.ordinary)}}
                                title={
                                    <span>
                                        <Icon type="plus-square" theme="twoTone" onClick={(e) => {Store.menuVisible = true;Store.pid=0;Store.subType=1;e.stopPropagation();}}/>
                                        <span>常规页面生成</span>
                                     </span>
                                }
                            >
                                {this.makeMenu()}
                            </SubMenu>
                            {/*简单页面生成*/}
                            <SubMenu
                                key="simple"
                                onTitleClick={() => {this.handleGroupClick(Store.simple)}}
                                title={
                                    <span>
                                   <Icon type="plus-square" theme="twoTone" onClick={(e) => {Store.menuVisible = true;Store.pid=0;Store.subType=2;e.stopPropagation();}}/>
                                    <span>简单页面生成</span>
                                </span>
                                }
                            >
                                {this.makeMenu()}
                            </SubMenu>
                            {/*数值页面生成*/}
                            <SubMenu
                                key="number"
                                onTitleClick={() => {this.handleGroupClick(Store.number)}}
                                title={
                                    <span>
                                   <Icon type="plus-square" theme="twoTone" onClick={(e) => {Store.menuVisible = true;Store.pid=0;Store.subType=3;e.stopPropagation();}}/>
                                    <span>数值页面生成</span>
                                </span>
                                }
                            >
                                {this.makeMenu()}
                            </SubMenu>
                        </Menu>
                    </div>
                    <div className={styles.right}>
                        {/*常规页面*/}
                        {Store.subType === 1 && Store.controller && <div style={{width:"90%"}}>
                            <Tabs activeKey={Store.activeKey} onChange={this.handleTabChange}>
                                <TabPane tab="模型配置" key="model">
                                    <ModelConfig />
                                </TabPane>
                                <TabPane tab="页面配置" key="page">
                                    <PageConfig />
                                </TabPane>
                            </Tabs>
                        </div>}
                        {/*简单页面*/}
                        {Store.subType === 2 && Store.controller && <div>
                            <SimpleConfig />
                        </div>}
                        {/*数值页面*/}
                        {Store.subType === 3 && Store.controller && <div>
                            <NumberConfig />
                        </div>}
                        {!Store.controller && <Empty />}
                    </div>
                </div>

                {/*弹窗们*/}
                {Store.menuVisible && <MenuForm/>}

                {Store.updateMenuVisible && <UpdateMenuForm />}

                {Store.resultVisible && <ResultModal />}
            </Fragment>
        );
    }
}

export default Index;
